

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { changeCity, changeCount, changeDataTestAsync, countAdd, countDesc, getMvList } from './../actions/index';
class Counter extends Component {


    render() {
        console.log(this)
        // props dispatch => store.dispatch 
        const { 
            count ,data:{mv,test,city } ,dispatch,
            countAdd,
            countDesc,
            changeCount,
            changeCity,
            changeDataTestAsync,
            getMvList
            } = this.props 
        return (
            <div>
                <h2>react-redux 实现简易的计数器  </h2>
                <h2>count --- {count} </h2>
                <h2>test --- {test} </h2>
                <h2>city --- {city } </h2>
                <hr/>
                <button onClick={countAdd}> count Add </button>
                <button onClick={countDesc}> count desc  </button>
                <button onClick={()=>changeCount(200)}> changeCount 200   </button>
                <button onClick={()=>changeCity('想去上海旅游')}> 想去上海旅游    </button>
                <button onClick={changeDataTestAsync}> get test     </button>
                <button onClick={getMvList}> get movie      </button>


                {
                    mv.map((l,i)=>{
                        return (
                            <p key={i}> {l.title }</p>
                        )
                    })
                }
            </div>
        );
    }
}

// 输入逻辑   mapStateToProps   父组件把state 映射给 子组件   (把容器组件的state 分发给UI组件)   父改子
// mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染  store
const mapStateToProps = (state)=>{  // state get from Provider (context)  store.getState 
    console.log(state)
    return {
        count:state.count,
        data:state.data,
        ...state 
    }
}
// 输出逻辑   输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去   子改父 
const mapDispatchToProps = (dispatch)=>{   // store.dispatch 
    return {
        countAdd:()=>dispatch(countAdd),
        countDesc:()=>dispatch(countDesc),
        changeCount:n=>dispatch(changeCount(n)),
        changeCity:city=>dispatch(changeCity(city)),
        changeDataTestAsync:()=>dispatch(changeDataTestAsync()),
        getMvList:()=>dispatch(getMvList())
    }
}

// class 组件
// 纯函数 组件
// 高阶   组件
export default connect(mapStateToProps,  mapDispatchToProps )(Counter);    // 容器
